// 首页的组件
<template>
    <div class="main">
        <section>
            <!-- 轮播 -->
            <Lunbo></Lunbo>

            <!-- 正在热映 -->
            <Now></Now>

            <!-- 马上热映 -->
            <Soon></Soon>
        </section>
        <section class="m-mark" v-if="isMark">
            <div>封装加载中</div>
        </section>
    </div>
</template>

<script>

    import Lunbo from './Lunbo.vue';
    import Now from './Now.vue';
    import Soon from './Soon.vue';

    export default {
        data: function() {
            return {
                isMark: true
            }
        },
        mounted: function() {
            // 因为去了详情页，返回回来。不变
            this.$store.commit('changeTitle', '卖座电影');
        },
        components: {
            Lunbo,
            Now,
            Soon
        }
    }

</script>

<style>
    .m-mark {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        background: red;
        z-index: 9999999999999999;
    }

    .m-mark div {
        width: 150px;
        height: 150px;
        line-height: 150px;
        text-align: center;
        color: #fff;
        background: skyblue;
        border: 1px solid #fff;
        border-radius: 15px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -75px;
        margin-top: -75px;
    }
</style>